<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>新建日志</title>
    <!-- 引入 WeUI -->
    <link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
    <script src="http://water.phpyiqiwan.com/packages/admin/AdminLTE/plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script src="/bower_components/vue/dist/vue.js"></script>
    <script src="/bower_components/weui.js/dist/weui.js"></script>

    <script>
        var localIds;
        function pai() {
            //https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1444738727
            wx.chooseImage({
                sourceType: [],
                success: function (res) {
                    localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                    $('#attachment_count').html(localIds.length)
                    for (var index in localIds) {
                        console.log("localIds[index]")
                        console.log(localIds[index])
                        wx.uploadImage({
                            localId: localIds[index], // 需要上传的图片的本地ID，由chooseImage接口获得
                            isShowProgressTips: 1, // 默认为1，显示进度提示
                            success: function (res) {

                                var serverId = res.serverId; // 返回图片的服务器端ID
                                $.getJSON('/report/url', {mid: serverId},function(reponse){
                                    if (reponse['data']['file']){
                                        $('#uploaderFiles').prepend('<li data-res="'+ reponse['data']['file'] +'" style="width: 45px;height: 45px" class="weui-uploader__file item_photo" > <img style="width: 45px;height: 45px" src="'+localIds[index]+'" /> </li>');
                                    }
                                })
                            }
                        });
                    }
                }
            });
        }
        $(function () {
            $.getJSON('/jssdk', {url: 'http://water.phpyiqiwan.com/report/add'}, function (reponse) {
                console.log(data)
                var data = reponse.data
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: data.appId, // 必填，公众号的唯一标识
                    timestamp: data.timestamp, // 必填，生成签名的时间戳
                    nonceStr: data.nonceStr, // 必填，生成签名的随机串
                    signature: data.signature,// 必填，签名，见附录1
                    jsApiList: ['onMenuShareTimeline', 'chooseImage', 'uploadImage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                });
            })

            wx.onMenuShareTimeline({
                title: '芯好水好', // 分享标题
                link: 'http://water.phpyiqiwan.com/index.php', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'http://water.phpyiqiwan.com/image/B3001010500_02%20(1).jpg', // 分享图标
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });
            $('#logType').click(function () {
                weui.picker([
                    {
                        label: '请选择类型',
                        value: 0,
                        disabled: true // 不可用
                    },
                    {
                        label: '普通',
                        value: 1
                    },
                    {
                        label: '严重',
                        value: 3
                    }
                ], {
                    className: 'custom-classname',
                    defaultValue: [0],
                    onChange: function (result) {
                        console.log(JSON.stringify(result))
                        $('#logTypeLabel').html(result[0]['label'])
                        $('#logTypeLabel').data('id',result[0]['value'])
                    },
                    onConfirm: function (result) {
                        console.log(result)
                    },
                    id: 'logType'
                });
            })

            $("#uploaderFiles").on("click", ".item_photo", function () {
                alert(1);
                if(confirm("删除吗")){
                    $(this).remove();
                }
            });

            $('.upload_photos').click(function(){
//                $('#uploaderFiles').prepend('<li data-res="1" style="width: 45px;height: 45px" class="weui-uploader__file item_photo" > <img style="width: 45px;height: 45px" src="1" /> </li>');
                var length = $('.item_photo').length;
                var pics=[]
                if (length) {
                    for (var i=0; i<length; i++) {
                        pics.push( $('.item_photo')[i].getAttribute('data-res') )
                    }
                }
                var post = {};
                post['title'] = $('#logTitle').val()
                post['content'] = $('#logContent').val()
                post['pics'] = pics
                post['type'] = $("#logTypeLabel").data("id")
                $.post('/report/add',post, function(data){
                    alert(JSON.stringify(data))
                    debugger

                },'json')
//                $("li.item_photo").each(function (){
//                    var rs_id = $(this).data("res")
//                    wx.uploadImage({
//                        localId: rs_id, // 需要上传的图片的本地ID，由chooseImage接口获得
//                        isShowProgressTips: 1, // 默认为1，显示进度提示
//                        success: function (res) {
//
//                        }
//                    });
//                })
            })
        });

    </script>
    <style>
        .pull_right {
            text-align: right;
        }
        .container {
            width: 99%;
        }
        .log_input{
            margin-top: 10px;
            margin-bottom: 10px;
            padding-left: 8px;
        }
        .log_area{
            padding: 8px;
        }
        .bottom_line{
            border-bottom: #E3E3E3 solid 1px;
        }
        .bg_gray{
            background-color: #F6F6F6;
        }
        .action_area{
            padding: 10px;
        }
        #uploaderFiles{
            margin-left:10px;
        }

    </style>
</head>

<body>
<div class="container">
    <div class="weui-flex bg_gray log_area">
        <div class="weui-flex__item">
            <div class="placeholder">日志类型</div>
        </div>
        <div class="weui-flex__item pull_right">
            <div id="logType" class="placeholder"><span id="logTypeLabel">请选择类型</span><span>▼</span></div>
        </div>
    </div>
    <div class="weui-flex log_input bottom_line">
        <div class="weui-flex__item">
            <input  id="logTitle" class="weui-input" type="text" placeholder="请输入日志标题">
        </div>
    </div>
    <div class="weui-flex log_input bottom_line">
        <div class="weui-flex__item">
            <textarea id="logContent" class="weui-textarea" placeholder="请输入日志内容" rows="3"></textarea>
            <div class="weui-textarea-counter"></div>
        </div>

    </div>
    <div class="weui-uploader">
        <div class="weui-uploader__hd">
            <p class="weui-uploader__title">图片上传</p>
        </div>
        <div class="weui-uploader__bd">
            <ul class="weui-uploader__files" id="uploaderFiles">


            </ul>
            <div  style="width: 45px;height: 45px"  class="weui-uploader__input-box">
                <button onclick="pai()"  class="weui-uploader__input"></button>
            </div>
        </div>
    </div>
    <div class="weui-flex bg_gray action_area">
        <div class="weui-flex__item">
            <div class="placeholder">附件(<span id="attachment_count">0</span>)</div>
        </div>
        <div class="weui-flex__item pull_right action_area_up">
            <button   class="weui-btn weui-btn_mini weui-btn_default upload_photos">上传</button>
        </div>
    </div>
</div>


</body>
</html>